<template>
    <div :class="fieldSetClass" style="display: inline-block;">
        <i class="fa fa-fw fa-cog"  @click="showSimpleSet"></i>
        <a-drawer
            class="simpleSet"
            title="设置"
            width="520"
            height="300"
            :closable="false"
            :visible="simpleSetVisible"
        >
            <a-row :gutter="24" class="form-inline">
                <a-col :span="24" v-for="(record,index) in data" :key="index">
                    <form-select v-if=" record.type == '下拉'"
                        :title="record.name"
                        size="small"
                        :selectStyle="(record.onEdit && (record.dataType == 1 || record.dataType == 2)) ? ' width:80%;':' width:100%;'"
                        labelStyle=""
                        rightClass="myRightClass"
                        :dataList="valForFormFN(record.val)"
                        v-model="record.value"
                    >
                        <a slot="actions" v-if="record.onEdit && (record.dataType == 1 || record.dataType == 2)"  @click="editItemValFnInRow(record)" class="editIcon"><a-icon type="edit" theme="twoTone" title="编辑下拉框内容"/></a>
                    </form-select>
                    <form-radio v-if="record.type == '单选'"
                         :title="record.name"
                        labelStyle=""
                        rightClass="myRightClass"
                        keyPre="menuType"
                        :dataList="valForFormFN(record.val)"
                        v-model="record.value"
                    >
                        <a slot="actions" v-if="record.onEdit && (record.dataType == 1 || record.dataType == 2)"  @click="editItemValFnInRow(record)" class="editIcon"><a-icon type="edit" theme="twoTone" title="编辑单选框内容"/></a>
                    </form-radio>
                    <form-check-box v-if="record.type == '复选'"
                        :title="record.name"
                        labelStyle=""
                        rightClass="myRightClass"
                        :dataList="valForCheckBoxFN(record.val)"
                        v-model="record.value"
                    >
                        <a slot="actions" v-if="record.onEdit && (record.dataType == 1 || record.dataType == 2)"  @click="editItemValFnInRow(record)" class="editIcon"><a-icon type="edit" theme="twoTone" title="编辑复选框内容"/></a>
                    </form-check-box>
                </a-col>
            </a-row>
            <nly-col xs="12" sm="12" class="form-inline align-self-center mt-5" style>
            <nly-button-group>
                <nly-button variant="danger" @click="closeSimpleSet" button-class="mr-2">关闭</nly-button>
                <nly-button variant="info" button-class="mr-2" @click="SaveAllEditItems">保存</nly-button>
            </nly-button-group>
            </nly-col>
        </a-drawer>
        <a-modal
            title="编辑"
            :visible="listDataVisible"
            @cancel="hideListDataModal"
            :footer="null"
        >
            <list-data-manager
                :list="listData"
                v-model="editItemVal"
                :callBack="hideListDataModal"
            >
            </list-data-manager>
        </a-modal>
    </div>
</template>

<script>

import {DefineFieldBatchSave} from "@/api/crm/set";
import ListDataManager from "./ListDataManager";

export default {
    name:"SimpleFieldSet",
    components:{
        ListDataManager
    },
    props:{
        //需要编辑 字段
        data:{
            type: Array,
            default:()=>[]
        },
        fieldSetClass:{
            type: String,
            default:"fieldSet"
        }
    },
    data(){
        return{
            simpleSetVisible: false,            //是否显示 抽屉
            listDataVisible: false,             //是否显示 数组
            listData: [],
            localEditItem:{},
            editItemVal:"",
            // data:[...this.value]
        }
    },
    created(){
        console.log("创建", this.data)
    },
    mounted(){
        // console.log("数据更新",this.FieldList,this.data);
    },
    methods:{
        showSimpleSet(){
            this.simpleSetVisible = true;
        },
        closeSimpleSet(){
            this.simpleSetVisible = false;
        },
        valForFormFN(editItemVal){
            let arr = new Array();
            if(editItemVal){
               let vals = editItemVal.split(",");
               arr = vals.map((item, index, arr) => {
                    return {key:item,title:item};
              })
            }
            return arr;
        },
        valForCheckBoxFN(editItemVal){
            let arr = new Array();
            if(editItemVal){
               let vals = editItemVal.split(",");
               arr = vals.map((item, index, arr) => {
                    return {label:item,value:item};
              })
            }
            console.log("valForCheckBoxFN",arr);
            return arr;
        },

        editItemValFnInRow(row){
            this.localEditItem = row;
            this.editItemVal = this.localEditItem.val;
            this.editItemValFn();
        },
        //编辑 自定义字段 的val数组
        editItemValFn(){
            this.listData = this.editItemVal ? this.editItemVal.split(",") : [];
            this.listDataVisible = true;
        },

        hideListDataModal(){
            this.localEditItem.val = this.editItemVal;
            this.localEditItem.isEdit = true;
            this.listDataVisible = false;
        },
         //批量保存
        SaveAllEditItems(){
            //1.筛选 isEdit = true 的记录
            let editList = this.data.filter(f=>f.isEdit);
            if(!editList || editList.length == 0){
              this.$info({
                  title: "提示",
                  content: '你没有做任何修改',
              });
              return false;
            }
            DefineFieldBatchSave(editList)
                .then(response => {
                    if (response.code === 200) {
                        this.$message.success("保存成功");
                        this.closeSimpleSet();
                        //更新
                        this.$emit("update:data", this.data);
                    } 
                })

        },
    }

}
</script>

<style lang="less" scoped>
    .fieldSet{
        cursor: pointer;
        float: right;
        margin-right: 10px;
        margin-top: 12px;
        font-size: 20px;
        color: #40a9ff;
        position: absolute;
        right: 1rem;
        z-index: 100;
    }
     .myRightClass{
        flex: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: auto !important;
        overflow: hidden;
        input,.ant-select{
            overflow: hidden;
        }
    } 
    .editIcon{
        color:#138496;
        font-size:1.2rem;
        display: inline-block;
        width:20%;
        text-align: center;
    }
</style>>

</style>